<template>
  <div class="container">
    <el-dialog
      :title="dialog.dialogType === 'edit' ? '修改客户' : '创建客户'"
      :visible.sync="dialog.centerDialogVisible"
      width="500px"
      center
      :lock-scroll="true"
      @close="hideDialog"
      @open="getData"
    >
      <el-form
        ref="form"
        :rules="rules"
        :model="formData"
        label-width="150px"
        label-position="left"
      >
        <el-form-item label="店铺名称：" prop="name">
          <el-input v-model="formData.name" placeholder="请输入角色名称" />
        </el-form-item>
        <el-form-item label="机构类型：" prop="property">
          <el-select v-model="formData.property" placeholder="请选择机构类型">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>

       
        <el-form-item label="门店区域Code：">
          <el-input
            v-model="formData.org_area_code"
            placeholder="请输入门店区域Code"
          />
        </el-form-item>
        <el-form-item label="门店区域名称：">
          <el-input
            v-model="formData.org_area_name"
            placeholder="请输入门店区域名称"
          />
        </el-form-item>
        <el-form-item label="机构地址：" prop="address">
          <el-input
            type="textarea"
            v-model="formData.address"
            placeholder="请输入机构地址"
          />
        </el-form-item>
         <el-form-item label="营业面积：">
           <el-input-number v-model="formData.acreage"  :step="0.01" :min="0" :max="99999" label="请输入营业面积"></el-input-number>
        </el-form-item>
        <el-form-item
          v-if="this.dialog.dialogType == 'edit'"
          label="有效状态："
        >
          <el-switch
            v-model="formData.is_enable"
            active-text="有效"
            inactive-text="无效"
          >
          </el-switch>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
        <el-button type="primary" @click="confirm()">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import { insertorg, updateorg, detailorg } from "@/api/store/storeList";
export default {
  props: {
    dialog: Object
  },
  data() {
    return {
      formData: {
        name: "",
        property: "",
        address: "",
        acreage: 0,
        org_area_code: "",
        org_area_name: "",
        is_enable: true
      },
      options: [
        {
          value: "0",
          label: "总部"
        },
        {
          value: "1",
          label: "配送中心"
        },
        {
          value: "2",
          label: "直营店"
        }
      ],
      rules: {
        name: [{ required: true, message: "填写角色名称", trigger: "blur" }],
        property: [
          { required: true, message: "选择机构类型", trigger: "blur" }
        ],
        address: [{ required: true, message: "填写机构地址", trigger: "blur" }]
      }
    };
  },
  methods: {
    getData() {
      if (this.dialog.dialogType == "edit") {
        let data = {
          id: this.dialog.id
        };
        detailorg(data).then(res => {
          this.formData = {
            name: res.data.name,
            property: res.data.property.toString(),
            address: res.data.address,
            acreage: res.data.acreage,
            org_area_code: res.data.org_area_code,
            org_area_name: res.data.org_area_name,
            is_enable: res.data.is_enable == 1 ? true : false
          };
        });
      }
    },
    hideDialog() {
      this.dialog.centerDialogVisible = false;
      this.$refs["form"].resetFields();
      this.formData = {
        name: "",
        property: "",
        address: "",
        acreage: "",
        org_area_code: "",
        org_area_name: "",
        is_enable: true
      };
    },
    //提交
    confirm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          let data = {
            name: this.formData.name,
            property: this.formData.property,
            address: this.formData.address,
            acreage: this.formData.acreage,
            org_area_code: this.formData.org_area_code,
            org_area_name: this.formData.org_area_name
          };
          if (this.dialog.dialogType == "edit") {
            data.id = this.dialog.id;
            data.is_enable = this.formData.is_enable ? 1 : 0;
            updateorg(data)
              .then(res => {
                if (res.code == 0) {
                  this.$message({
                    message: res.message || res.msg,
                    type: "success"
                  });
                  this.hideDialog();
                  this.$emit("upData");
                } else {
                  this.$message({
                    message: res.message || res.msg,
                    type: "error"
                  });
                }
              })
              .catch(res => {
                console.log(res);
              });
          } else {
            insertorg(data)
              .then(res => {
                if (res.code == 0) {
                  this.$message({
                    message: res.message || res.msg,
                    type: "success"
                  });
                  this.hideDialog();
                  this.$emit("upData");
                } else {
                  this.$message({
                    message: res.message || res.msg,
                    type: "error"
                  });
                }
              })
              .catch(res => {
                console.log(res);
              });
          }
        }
      });
    },
    //取消
    cancel() {
      this.hideDialog();
    }
  }
};
</script>
